<!--
 * @Description: 表格单元格超出指定字数后显示提示
 * @Date: 2023-09-20 11:42:39
 * @FilePath: \hksj-vued:\03code\hk-marketing-crm\src\components\tableCellOverflow\index.vue
-->
<template>
	<div class="cell-box" ref="cellRef">
		<span v-if="props.data?.length <= 20">
			{{ props.data }}
		</span>
		<span v-else-if="!props.data?.length"> {{ props.emptyText }} </span>
		<span v-else>
			<el-popover effect="dark" placement="top-start" :width="400" trigger="hover" :content="props.data">
				<template #reference> {{ props.data?.slice(0, props.rowSize) }}... </template>
			</el-popover>
		</span>
	</div>
</template>

<script lang="ts" setup name="tableCellOverflow">
import { ref } from 'vue';
const cellRef = ref();

const props = defineProps({
	// 传入的数据
	data: {
		type: String,
		default: '',
	},
	// 每行数据显示的长度
	rowSize: {
		type: Number,
		default: 20,
	},
	// 数据为空时展示的内容
	emptyText: {
		type: String,
		default: '---',
	},
});
</script>

<style lang="scss" scoped>
.cell-box {
}
</style>
